<template>
    <div class="col-xs-6 col-md-6 col-lg-6 diskinfo">
        <div class="bgcolor">
            <loading v-show='!show'></loading>
            <div class="page-title">
                <h3>{{title}}</h3>
            </div>
            <transition name='fade'>             
                <div :id="id" class="pic" v-show='show'> </div>   
            </transition>
        </div>
    </div>
</template>
<script>
import loading from "components/common/loading";
export default {
  props: {
    id: {
      type: String
    },
    name: {
      type: String
    },
    title: {
      type: String
    },
    unit: {
      type: String
    },
    picData: {
      type: Array,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  data: function() {
    return {
      intervalid: null,
      num: 0,
      color: ""
    };
  },
  mounted() {
    if (this.themeColor === "blue") {
      this.color =[ "#57a3f3", '#f5a623'];
    } else if (this.themeColor === "red") {
      this.color = ["#d8252f", '#f5a623'];
    }
  },
  beforeDestroy: function() {
    clearInterval(this.intervalid);
  },
  watch: {
    picData: function() {
      if (this.num == 0) {
        this.loadSpline(this.picData);
        this.num++;
        this.intervalid = setInterval(() => {
          let chart = $("#" + this.id).highcharts();
          let x = this.picData.pop().timestamp * 1000 ? this.picData.pop().timestamp * 1000 : 0;
          let y = 0, core = 0;
          y = Number(Number(this.picData.pop().value.user).toFixed(1)) ? Number(Number(this.picData.pop().value.user).toFixed(1)) : 0
          core = Number(Number(this.picData.pop().value.coretem).toFixed(1)) ? Number(Number(this.picData.pop().value.coretem).toFixed(1)) : 0
          chart.series[0].addPoint({x: x,y: y}, true, true);
          chart.series[1].addPoint({x: x,y: core}, true, true);
        }, 10000);
      }
    }
  },
  methods: {
    loadSpline(picData) {
      let _this = this;
      Highcharts.setOptions({
        global: {
          useUTC: false
        },
        // colors: ['#31c609', '#41a7fd'],
        credits: {
          enabled: false // 禁用版权信息
        },
        exporting: {
          enabled: false
        },
        legend: {
          enabled: false
        }
      });
      Highcharts.chart(this.id, {
        chart: {
          type: _this.id == "node" ? "line" : "spline",
          plotBackgroundColor: "#eeeeee",
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10
        },
        title: {
          text: null
        },
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S"
          },
          tickPixelInterval: 120, //刻度线的像素间隔
          tickWidth: 0,
          gridLineColor: "rgba(255,255,255,0.5)",
          gridLineWidth: 1,
          gridLineDashStyle: "Dash",
          crosshair: {
            dashStyle: "dash",
            color: "lightgray"
          }
        },

        yAxis: {
          title: {
            text: null
          },
          gridLineColor: "rgba(255,255,255,0.5)",
          gridLineWidth: 1,
          lineColor: _this.color,
          tickInterval: 20,
          min: 0, // 定义最小值
          minPadding: 0.2,
          maxPadding: 0.2,
          crosshair: {
            dashStyle: "dash",
            color: "#fff"
          },
          labels: {
            formatter: function() {
                return this.value + "%"
            }
          }
        },
        tooltip: {
          shared: true,
          valueSuffix: ' %',
          dateTimeLabelFormats: {
            second: '%H:%M:%S'
          }
        },
        legend: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        lang: {
          noData: "暂无数据"
        },
        noData: {
          style: {
            fontSize: "15px",
            color: _this.color
          }
        },
        format: { y: "%H:%M:%S" },
        series: [
          {
            lineWidth: 2,
            shadow: true,
            color: _this.color[0],
            marker: {
              fillColor: _this.color[0],
              radius: 0,
              states: {
                hover: {
                  enabled: true,
                  fillColor: _this.color[0],
                  radius: 4
                }
              }
            },
            name: 'user',
            data: (function() {
              let data = [];
                for (let k = 0; k < picData.length; k++) {
                  let obj = {
                    x: picData[k].timestamp * 1000,
                    y: Number(Number(picData[k].value.user).toFixed(1)) ? Number(Number(picData[k].value.user).toFixed(1)) : 0
                  }
                  data.push(obj)
                } 
              return data;
            })()
          },
          {
            lineWidth: 2,
            shadow: true,
            color: _this.color[1],
            marker: {
              fillColor: _this.color[1],
              radius: 0,
              states: {
                hover: {
                  enabled: true,
                  fillColor: _this.color[1],
                  radius: 4
                }
              }
            },
            name: 'core',
            data: (function() {
              let data = [];
                for (let k = 0; k < picData.length; k++) {
                  let core = {
                    x: picData[k].timestamp * 1000,
                    y: Number(Number(picData[k].value.coretem).toFixed(1)) ? Number(Number(picData[k].value.coretem).toFixed(1)) : 0
                  }
                  data.push(core)
                } 
              return data;
            })()
          }
        ]
      });
      let chart = $("#" + this.id).highcharts();
      if (this.id !== "node") {
        chart.yAxis[0].setExtremes(0, 100);
      }
    }
  },
  components: {
    loading
  }
};
</script>
<style scoped>
.pic {
  width: 520px;
  height: 300px;
  margin: 20px;
}
</style>
